/* Slider container-এর বেসিক স্টাইল */
.slider-container {
    width: 90%;
    margin: 50px auto;
    position: relative;
}

/* --- মোবাইল ডিজাইন (768px পর্যন্ত) --- */

/* ডিফল্টভাবে সব স্লাইড স্পষ্ট থাকবে */
.slick-slide {
    transition: filter 0.3s ease;
    filter: none; /* মোবাইলে কোনো ব্লার নেই */
}

/* মোবাইলে ছবির স্টাইল (Code 1 এর মতো) */
.slick-slide img {
    width: 100%;
    height: auto;           /* উচ্চতা অটো */
    max-height: 250px;      /* সর্বোচ্চ উচ্চতা ২৫০ পিক্সেল */
    object-fit: contain;    /* পুরো ছবি দেখাবে, কাটবে না */
    border-radius: 8px;
}

/* Arrow-এর মোবাইল স্টাইল */
.slick-prev { left: -25px; }
.slick-next { right: -25px; }


/* --- ডেস্কটপ ডিজাইন (769px থেকে শুরু) --- */
@media (min-width: 769px) {

    /* ডেস্কটপে পাশের স্লাইডগুলো ব্লার হবে */
    .slick-slide {
        filter: blur(4px);
    }

    /* ডেস্কটপে শুধুমাত্র মাঝের স্লাইড স্পষ্ট থাকবে */
    .slick-center {
        filter: blur(0);
    }

    /* ডেস্কটপে ছবির স্টাইল (Code 2 এর মতো) */
    .slick-slide img {
        width: 100%;
        height: 500px;          /* নির্দিষ্ট উচ্চতা ৪০০ পিক্সেল */
        object-fit: fill;      /* ছবি পুরো জায়গা জুড়ে থাকবে, কেটে যাবে */
        max-height: none;       /* মোবাইলের max-height এখানে কাজ করবে না */
    }

    /* Arrow-এর ডেস্কটপ স্টাইল */
    .slick-prev { left: -35px; }
    .slick-next { right: -35px; }
}


/* --- সবার জন্য কমন Arrow স্টাইল --- */
.slick-prev, .slick-next {
    z-index: 2;
}

.slick-prev:before,
.slick-next:before {
    color: #008080 !important;
    font-size: 30px;
}